<template>
  <div>
      <el-tabs class="setting"  v-model="activeName" type="card">
        <el-tab-pane label="个人资料" name="first">
          <h1>编辑资料</h1>
          <el-form ref="settingForm" :model="settingForm" label-width="80px">
            <el-form-item label="用户ID">
              <el-input disabled v-model="settingForm.userId"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="settingForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="settingForm.sex" autocomplete="off">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
                <el-option label="未知" value="未知"></el-option>
              </el-select>
              <el-form-item
                label="年龄"
                prop="age"
                :rules="[
                  { type: 'number', message: '年龄必须为数字值'}
                ]"
              >
                <el-input type="age" v-model.number="settingForm.age" autocomplete="off"></el-input>
              </el-form-item>
            </el-form-item>
            <el-form-item label="个人简介">
              <el-input type="textarea" v-model="settingForm.other" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item v-if="stu.school!=null" label="所在学校">
              <el-input disabled v-model="stu.school"></el-input>
            </el-form-item>
            <el-form-item label="所学专业">
              <el-input disabled v-model="stu.profession"></el-input>
            </el-form-item>
            <el-form-item label="毕业时间">
              <el-input disabled v-model="stu.graduateTime"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit()">立即修改</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="账号管理" name="second">
          <div> 
            <div class="bind">
              <span class="bindName">密码管理</span>
              <div class="bindInfo">
                <el-button style="margin-left: 815px" type="primary" @click="updatePassWord()">重置</el-button>
              </div>
            </div>
            <div class="bind">
              <span class="bindName">账号注销</span>
              <div class="bindInfo">
                <el-button style="margin-left: 814px" type="danger" @click="logout()">注销</el-button>
              </div>
            </div>
            <div class="bind">
              <span class="bindName">手机</span>
              <div class="bindInfo">
                <span v-if="userBind.bindPhone!=null" class="bindLink">{{userBind.bindPhone}}</span>
                <span v-if="userBind.bindPhone===null" class="bindLink">未绑定</span>
                <div class="isBind">
                  <el-button v-if="userBind.bindPhone!=null" type="warning" @click="unBindInfo('bindPhone')">解绑</el-button>
                  <el-button v-if="userBind.bindPhone===null" type="primary" @click="bindInfo('bindPhone')">绑定</el-button>
                </div>
              </div>
            </div>
            <div class="bind">
              <span class="bindName">微信</span>
              <div class="bindInfo">
                <span v-if="userBind.bindWechat!=null" class="bindLink">{{userBind.bindWechat}}</span>
                <span v-if="userBind.bindWechat===null" class="bindLink">未绑定</span>
                <div class="isBind">
                  <el-button v-if="userBind.bindWechat!=null" type="warning" @click="unBindInfo('bindWechat')">解绑</el-button>
                  <el-button v-if="userBind.bindWechat===null" type="primary" @click="bindInfo('bindWechat')">绑定</el-button>
                </div>
              </div>
            </div>

            <div class="bind">
              <span class="bindName">QQ</span>
              <div class="bindInfo">
                <span v-if="userBind.bindQq!=null" class="bindLink">{{userBind.bindQq}}</span>
                <span v-if="userBind.bindQq===null" class="bindLink">未绑定</span>
                <div class="isBind">
                  <el-button v-if="userBind.bindQq!=null" type="warning" @click="unBindInfo('bindQq')">解绑</el-button>
                  <el-button v-if="userBind.bindQq===null" type="primary" @click="bindInfo('bindQq')">绑定</el-button>
                </div>
              </div>
            </div>

            <div class="bind">
              <span class="bindName">新浪</span>
              <div class="bindInfo">
                <span v-if="userBind.bindSina!=null" class="bindLink">{{userBind.bindSina}}</span>
                <span v-if="userBind.bindSina===null" class="bindLink">未绑定</span>
                <div class="isBind">
                  <el-button v-if="userBind.bindSina!=null" type="warning" @click="unBindInfo('bindSina')">解绑</el-button>
                  <el-button v-if="userBind.bindSina===null" type="primary" @click="bindInfo('bindSina')">绑定</el-button>
                </div>
              </div>
            </div>

            <div class="bind">
              <span class="bindName">Bilibili</span>
              <div class="bindInfo">
                <span v-if="userBind.bindBilibili!=null" class="bindLink">{{userBind.bindBilibili}}</span>
                <span v-if="userBind.bindBilibili===null" class="bindLink">未绑定</span>
                <div class="isBind">
                  <el-button v-if="userBind.bindBilibili!=null" type="warning" @click="unBindInfo('bindBilibili')">解绑</el-button>
                  <el-button v-if="userBind.bindBilibili===null" type="primary" @click="bindInfo('bindBilibili')">绑定</el-button>
                </div>
              </div>
            </div>
          </div>
          <div>  
            <el-dialog
              title="修改密码"
              :visible.sync="dialogVisible"
              width="40%">
              <el-form :model="passwordForm" ref="passwordForm" :rules="rules">
                <el-form-item label="输入旧密码" label-width="20%" prop="oldPassWord">
                  <el-input type="password" auto-complete="off" show-password v-model="passwordForm.oldPassWord"></el-input>
                </el-form-item>
                <el-form-item label="输入新密码" label-width="20%" prop="newPassWord">
                  <el-input type="password" auto-complete="off" show-password v-model="passwordForm.newPassWord"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" label-width="20%" prop="yesNewPassWord">
                  <el-input type="password" auto-complete="off" show-password v-model="passwordForm.yesNewPassWord"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="margin-left: 100px" type="primary" @click="resetPassWord()">确认</el-button>
                  <el-button @click="resetForm()" style="float:right;margin-left: 100px">重置</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
          </div>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'Setting',
  mounted() {
    this.initForm()
  },
  data() {
      var validateOldPass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入旧密码"))
        }
        callback();
      };
      var validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入新密码"));
        } else if (value === this.passwordForm.oldPassWord) {
          callback(new Error("新旧密码一样，重新输入"))
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入新密码"));
        } else if (value !== this.passwordForm.newPassWord) {
          callback(new Error("两次输入新密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        dialogVisible: false,
        stu: {
          stuId: '',
          school: '',
          profession: '',
          graduateTime: '',
          photo: ''
        },
        userBind: {
          bindPhone: '',
          bindWechat: '',
          bindQq: '',
          bindSina: '',
          bindBilibili: ''
        },
        activeName: 'first',
        settingForm: {
          userId: 0,
          username: '',
          sex: '',
          age: 0,
          other: ''
        },
        passwordForm: {
          oldPassWord: '',
          newPassWord: '',
          yesNewPassWord: ''
        },
        rules: {
          oldPassWord: [{validator: validateOldPass, trigger: 'blur'}],
          newPassWord: [{ validator: validatePass, trigger: "blur" }],
          yesNewPassWord: [{ validator: validatePass2, trigger: "blur" }],
      },
      };
    },
    methods: {
      initForm() {
        let userInfo = window.sessionStorage.getItem('user');
        let user = JSON.parse(userInfo);
        this.settingForm.userId = user.userId;  
        this.settingForm.username = user.username;
        this.settingForm.sex = user.sex;
        this.settingForm.age = user.age;
        this.settingForm.other = user.other;

        this.getRequest('/user-bind/getUserBind?userId='+user.userId).then((resp) => {
          if (resp) {
            this.userBind = resp;
            console.log(this.userBind);
          }
        });
        this.getRequest('/stu-certification/getStuInfo?userId='+user.userId).then((resp) => {
          if (resp) {
            this.stu.stuId = resp.stuId;
            this.stu.school = resp.stuSchool;
            this.stu.profession = resp.stuProfession;
            this.stu.graduateTime = resp.stuGraduateTime;
            this.stu.photo = resp.stuPhoto
          }
        })
      },
      onSubmit() {
        this.$confirm('即将修改用户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$refs.settingForm.validate((valid) => {
          if (valid) {
            this.postRequest('/updateUserInfo',this.settingForm).then((resp) => {
              if (resp) {
                console.log(resp)
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });          
        });
        
      },
      reset() {
        this.$refs.settingForm.resetFields();
      },
      updatePassWord() {
        this.dialogVisible = true;
      },
      resetPassWord() {
        console.log("进来了倒是")
        this.$refs.passwordForm.validate((valid) => {
          console.log("zheli")
          if (valid) {
            console.log("没有还行的")
            this.postRequest("/modifyPassWord", this.passwordForm).then((resp) => {
              if (resp) {
                console.log(resp);
                this.dialogVisible = false;
              }
            });
          } else {
            this.$message.error("请全部输入新旧密码");
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.passwordForm.resetFields();
      },
      logout() {
        this.$confirm('此操作将永久注销本系统账号, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.postRequest('/quit').then((resp) => {
            if (resp) {
              //清空用户信息
              window.sessionStorage.removeItem("tokenStr");
              window.sessionStorage.removeItem("user");
              //清空菜单
              this.$store.commit("initRoutes", []);
              //跳转登录页面
              this.$router.replace("/");
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消！'
          });          
        });
      },
      unBindInfo(info) {
        if ('bindPhone' === info) {
          this.userBind.bindPhone = null;
        } else if ('bindWechat' === info) {
          this.userBind.bindWechat = null;
        } else if ('bindQq' === info) {
          this.userBind.bindQq = null;
        } else if ('bindSina' === info) {
          this.userBind.bindSina = null;
        } else if ('bindBilibili' === info) {
          this.userBind.bindBilibili = null;
        }
        console.log(this.userBind)
        this.putRequest('/user-bind/updateUserBind',this.userBind).then((resp) => {
          if (resp) {
              console.log(resp)
          }
        })
      },
      bindInfo(info) {

      }
    }
}
</script>

<style>
.bind {
  display: flex;
  padding: 2rem 0px;
  border-top: 1px solid #ffff;
}
.bindName {
  width: 10rem;
  font-size: large;
  color: black;
}
.bindInfo {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
}
.bindLink {
  flex: 1 1 auto;
  color: darkgray;
  font-size: large;
}
.isBind {
  margin-left: 10px;
}
.setting{
  margin-top: 20px;
}
</style>